// src/views/About.tsx
import { defineComponent, ref, onMounted } from 'vue';
import './home.less';
import { getActivityTaskInfo, receiveTask, completeTask, selectPrizeRecordList } from '@/api';
import { NDataTable, type DataTableColumns, NButton, createDiscreteApi, NImage, NGrid, NGridItem, NNumberAnimation } from 'naive-ui'; 
import headerImage from '@/assets/1.jpeg';

const paramsObj: any = {
  pin: '小布--丁',
  activityId: 'ACT_BT_NEW_USER_TASK',
  businessLine: "ACT_BT_NEW_USER_TASK"
}

export const Home = defineComponent({
  name: 'Home',
   setup(props, ctx) {
    const message = createDiscreteApi(['message']).message;
    interface IActivityInfo {
      activity: any;
      activityTaskList: object[];
      taskRecordList?: object[];
    }
    const activityInfo = ref<IActivityInfo>({activity: {}, activityTaskList: []});
    
    
    
    const getActivityTaskInfoFn = () => {
      getActivityTaskInfo({pin: paramsObj.pin, activityId: paramsObj.activityId}).then(res => {
        activityInfo.value = res.data || {};
        // 设置activityTaskList每项的taskRecordListStatus
        for (let index = 0; index < activityInfo.value.activityTaskList.length; index++) {
          const item = activityInfo.value.activityTaskList[index] as any;
          if(item.received){
            for (let j = 0; j < (activityInfo.value.taskRecordList || []).length; j++) {
              const element = (activityInfo.value.taskRecordList || [])[j] as any;
              if(element.taskId === item.taskId){
                item.taskRecordListStatus = element.status;
                item.rid = element.rid;
                activityInfo.value.activityTaskList[index] = item;
                break;
              }
            }
          }
        }
      });
    }
    interface IPrizeRecordInfo {
      mj: number;
      lj: number;
      mx: number;
      bt_credit: number;
      jd: number;
      xjkhb: number;
    }
    const prizeRecordInfo = ref<IPrizeRecordInfo>({
      mj: 0,
      lj: 0,
      mx: 0,
      bt_credit: 0,
      jd: 0,
      xjkhb: 0
    });
    
    const selectPrizeRecordListFn = () => {
      
      selectPrizeRecordList({pin: paramsObj.pin, businessLine: paramsObj.businessLine}).then(res => {
        const list = res.prizeRecordList || [];
        prizeRecordInfo.value = {
          mj: 0,
          lj: 0,
          mx: 0,
          bt_credit: 0,
          jd: 0,
          xjkhb: 0
        }
        for (let index = 0; index < list.length; index++) {
          const element = list[index];
          if(element.prizeType === 1){
            prizeRecordInfo.value.mj = prizeRecordInfo.value.mj +1;
          }else if (element.prizeType === 2){
            prizeRecordInfo.value.lj = prizeRecordInfo.value.lj +1;
          }else if (element.prizeType === 3){
            prizeRecordInfo.value.mx = prizeRecordInfo.value.mx +1;
          }else if(element.prizeType === 4){
            prizeRecordInfo.value.jd = prizeRecordInfo.value.jd + element.prizeSendResult || 0;
          }else if(element.prizeType === 5){
            prizeRecordInfo.value.xjkhb = prizeRecordInfo.value.xjkhb + element.prizeSendResult || 0;
          }else if(element.prizeType === 6){
            prizeRecordInfo.value.bt_credit = prizeRecordInfo.value.bt_credit + element.prizeSendResult || 0;
          }
        }
      })
    }
    onMounted(() => {
      getActivityTaskInfoFn();
      selectPrizeRecordListFn();
    })
    const extDataCLick = (btnItemInfo: any) => {
      return () => {
        if(btnItemInfo.received){
          if(btnItemInfo.taskRecordListStatus === 'COMPLETED'){//已完成
            message.info('该活动已经完成了');
          }else{ //去完成
            completeTask({pin: paramsObj.pin, rid: btnItemInfo.rid}).then(res => {
              message.info('completeTask, success');
              getActivityTaskInfoFn();
              selectPrizeRecordListFn();
            })
          }
        }else{ //去领取
          receiveTask({pin: paramsObj.pin, tpId: btnItemInfo.tpId, receiveMode: btnItemInfo.receiveMode}).then(res => {
            message.info('receiveTask, success');
            getActivityTaskInfoFn();
            selectPrizeRecordListFn();
          })
          // message.info(`value:${btnItemInfo.value},key:${btnItemInfo.key}`);
        }
      }
    }

    const btnStatusText = (item: any, returnType?: boolean) => {
      if(returnType){
        return item.received ? 
        item.taskRecordListStatus === 'COMPLETED' ? 'success' : 'error'
        : 'warning'
      }
      return item.received ? 
      item.taskRecordListStatus === 'COMPLETED' ? '已完成' : '去完成'
      : '去领取'
    }

    interface ITableColumnItem {
      title: string
      key: string
      render?: () =>{}
    }
    const columns: DataTableColumns<ITableColumnItem> = [
      { title: '福利专区', key: 'taskName' },
      { title: '', key: 'rewardConfigVoList', render(row:any) {
        console.log(row.rewardConfigVoList)
       return (
        <span>
          {
            (row.rewardConfigVoList || []).map((element:any, index: number) => {
              return(
                <div>{`${element.rewardName}`}</div>
              )
            })
          }
        </span>
       )
      },},
      { title: '', key: 'extData', render(row: any) {
        return (
          <div>
            {
              JSON.parse(row.extData || '[]').map((item: any, index: number) => {
                return (
                  // 
                  index === 0 ? <NButton class='tableBtn' onClick={extDataCLick(row)} type={btnStatusText(row, true) as typeof NButton['type']}> { 
                    btnStatusText(row)
                  } </NButton> : null
                )
              })
            }
          </div>
        )
      } },
    ];
   

    return () => (
      <div class="homeBox">
        <div class={'head'}>
          <div class={'left'}>
            {/* <NImage
              width={100}
              height={100}
              src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
            /> */}

          </div>
          <div class={'right'}>
            <NImage
              width={60}
              height={60}
              object-fit="cover"
              style={{ borderRadius: '50%' }}
              src={headerImage}
            />
            <div>小布--丁</div>
          </div>
        </div>
        <div class={'content'}>
            <NGrid x-gap="12" y-gap="8" cols="4">
              <NGridItem span="3">
                <NDataTable bordered={false} bottom-bordered={false} columns={columns} data={activityInfo.value.activityTaskList}/>
              </NGridItem>
              <NGridItem span="1">
                <div class="rightBox">
                  <div class={'item'}>
                    <div class={'label'}>满减优惠券:</div>
                    <div class="value">
                      <NNumberAnimation ref="numberAnimationInstRef" from={0} to={prizeRecordInfo.value.mj} />
                    </div>
                  </div>
                  <div class={'item'}>
                    <div class={'label'}>立减优惠券:</div>
                    <div class="value">
                      <NNumberAnimation ref="numberAnimationInstRef" from={0} to={prizeRecordInfo.value.lj} />
                    </div>
                  </div>
                  <div class={'item'}>
                    <div class={'label'}>6/12期免息优惠券:</div>
                    <div class="value">
                      <NNumberAnimation ref="numberAnimationInstRef" from={0} to={prizeRecordInfo.value.mx} />
                    </div>
                  </div>
                  <div class={'item'}>
                    <div class={'label'}>白条额度:</div>
                    <div class="value">
                      <NNumberAnimation ref="numberAnimationInstRef" show-separator from={0} to={prizeRecordInfo.value.bt_credit} />
                    </div>
                  </div>
                  <div class={'item'}>
                    <div class={'label'}>京豆:</div>
                    <div class="value">
                      <NNumberAnimation ref="numberAnimationInstRef" show-separator from={0} to={prizeRecordInfo.value.jd} />
                    </div>
                  </div>
                  <div class={'item'}>
                    <div class={'label'}>小金库红包:</div>
                    <div class="value">
                      <NNumberAnimation ref="numberAnimationInstRef" from={0} to={prizeRecordInfo.value.xjkhb} />
                    </div>
                  </div>
                </div>
              </NGridItem>
            </NGrid>
           
        </div>
      </div>
    );
  }
});
